<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>砼鑫管理平台</title>
    <link rel="stylesheet" href="./plugin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/tx-management-platform.css"/>
    <link rel="stylesheet" type="text/css" href="./css/public.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_399172_mjjwqq50338ilik9.css"/>

    <link rel="stylesheet" href="./css/tree.css">
    <title>权限管理</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .bg-canvas {

        }

        @keyframes ani {
            0% {
                transform: scale(6) translate3d(-200px, -100px, 0) rotate(0deg);
                opacity: 0;
            }

            50% {
                transform: scale(3) translate3d(0px, 0px, 0) rotate(180deg);
                opacity: 1;
            }

            100% {
                transform: scale(6) translate3d(200px, 200px, 0) rotate(360deg);
                opacity: 0;
            }
        }

        .bg-canvas.active {
            animation: ani 10s ease infinite;
        }

        button {
            outline: none;
        }

        input[type="checkbox"], button {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background-color: transparent;
            outline: none;
        }

        input[type="checkbox"]:after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        input[type="checkbox"]:checked:after {
            background-color: #5e5e5e;
        }

        .mywrap {
            display: inline-block;
        }

        .button-group-mier {
            position: fixed;
            width: 200px;
            height: 60px;
            right: 50px;
            top: 40px;
        }

        .button-group-mier {
            position: fixed;
            width: 200px;
            right: -115px;
            top: 134px;
        }

        .button-group-mier {
            position: fixed;
            width: 200px;
            /* height: 60px; */
            right: 26px;
            top: 134px;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            font-size: 14px;
        }

        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            font-size: 14px;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            font-size: 14px;
        }

        :-ms-input-placeholder { /* Internet Explorer 10+ */
            font-size: 14px;
        }
        .layui-body{left: 0!important;}
    </style>
</head>
<body>

<div id="app">


    <div class="layui-layout layui-layout-admin">

        <div class="layui-body" style="display: block;">
            <div class="mytable-app">
                <div class="bg-canvas"></div>

                <div class="table-view">


                    <!--一级菜单-->
                    <ul class="table-box" style="border-color: #337AB7;">

                        <li class="item-list one" v-for="(value01,index01) in menu">
                            <div class="item-title">
                                <button type="button" @click="toggleShow(value01)" v-show="isAnFunction(value01)"
                                        class="btn btn-xs btn-link title no-padding-right">
                                    <span class="glyphicon glyphicon-plus-sign" style="color: #337AB7"
                                          :class="{ 'glyphicon glyphicon-minus-sign' : value01.active }"></span>
                                </button>

                                <label class="mywrap">
                                    <span type="button" class="btn btn-xs">
                                        <input type="checkbox" v-model="value01.checked" @change="microsoftChange(value01)">
                                    </span>
                                    <span type="button" class="btn btn-xs btn-link title no-padding-left">{{value01.MenuName}}</span>
                                </label>

                            </div>

                            <!--二级菜单-->
                            <ul class="table-box" v-show="value01.active" style="border-color: #5CB85C;">

                                <li class="item-list one" v-for="(value02,index02) in value01.children">
                                    <div class="item-title">
                                        <button type="button" @click="toggleShow(value02)"
                                                v-show="isAnFunction(value02)"
                                                class="btn btn-xs btn-link title no-padding-right">
                                            <span class="glyphicon glyphicon-plus-sign" style="color: #5CB85C"
                                                  :class="{ 'glyphicon glyphicon-minus-sign' : value02.active }"></span>
                                        </button>

                                        <label class="mywrap">
                                <span type="button" class="btn btn-xs">
                                    <input type="checkbox" v-model="value02.checked" @change="microsoftChange(value02)">
                                </span>
                                            <span type="button" class="btn btn-xs btn-link title no-padding-left">{{value02.MenuName}}</span>
                                        </label>
                                    </div>

                                    <!--三级菜单-->
                                    <ul class="table-box" v-show="value02.active" style="border-color: #F0AD4E;">

                                        <li class="item-list one" v-for="(value03,index03) in value02.children">
                                            <div class="item-title">
                                                <button type="button" @click="toggleShow(value03)"
                                                        v-show="isAnFunction(value03)"
                                                        class="btn btn-xs btn-link title no-padding-right">
                                                    <span class="glyphicon glyphicon-plus-sign" style="color: #F0AD4E"
                                                          :class="{ 'glyphicon glyphicon-minus-sign' : value03.active }"></span>
                                                </button>

                                                <label class="mywrap">
                                        <span type="button" class="btn btn-xs">
                                            <input type="checkbox" v-model="value03.checked"
                                                   @change="microsoftChange(value03)">
                                        </span>
                                                    <span type="button"
                                                          class="btn btn-xs btn-link title no-padding-left">{{value03.MenuName}}</span>
                                                </label>
                                            </div>

                                            <!--四级菜单-->
                                            <ul class="table-box" v-show="value03.active">

                                                <li class="item-list one" v-for="(value04,index04) in value03.children">
                                                    <div class="item-title">
                                                        <button type="button" @click="toggleShow(value04)"
                                                                v-show="isAnFunction(value04)"
                                                                class="btn btn-xs btn-link title no-padding-right">
                                                            <span class="glyphicon glyphicon-plus-sign"></span>
                                                        </button>

                                                        <label class="mywrap">
                                                        <span type="button" class="btn btn-xs">
                                                            <input type="checkbox" v-model="value04.checked"
                                                                   @change="microsoftChange(value04)">
                                                        </span>
                                                            <span type="button"
                                                                  class="btn btn-xs btn-link title no-padding-left">{{value04.MenuName}}</span>
                                                        </label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <div class="button-group-mier">
                        <div class="form-group">
                            <select name="" id="" class="form-control" v-model="apple" @change="chouseGoogle">
                                <option :value="x.id" v-for="x in google" v-html="x.groupname">加载中...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="button" @click="microsoftUpLoad" class="btn btn-success" :disabled="disabled">
                                保存更改
                            </button>
                            <button type="button" @click="deleteBedApple" class="btn btn-danger">删除权限组</button>
                        </div>

                        <div>
                            <button type="button" @click="beforeAddGroup" v-show="!isShowAddGroup" class="btn btn-info">添加权限组</button>

                            <div class="form-group" v-if="isShowAddGroup">
                                <input type="text" maxlength="10" class="form-control" v-model="nasaPlane.groupName"
                                       placeholder="权限组名">
                            </div>
                            <div class="form-group" v-if="isShowAddGroup">
                                <button type="button" @click="nasaAdd" class="btn btn-info" :disabled="disabled">确认</button>
                                <button type="button" class="btn btn-danger" @click="isShowAddGroup = !isShowAddGroup;window.location.reload()">取消</button>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>



    </div>

</div>
</body>
<script src="./plugin/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="./plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/tx-management-platform.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./js/api.js"></script>
<script type="text/javascript" src="./plugin/vue/vue.min.js"></script>
<script>
    window.isAdmin = true;
</script>
<script type="text/javascript" src="./plugin/vue/vue-ui.js"></script>
<script type="text/javascript" src="./plugin/layer/layer.js"></script>
<script src="./js/table-render.js"></script>
</html>